﻿ 
@{
    Style.Include("prettyPhoto.css").AtHead();
    Style.Include("prettyGallery.css").AtHead();
}

@{
    Style.Require("pnotify");
    Style.Require("Module");

    Script.Require("require");
    Script.Require("angular");
    Script.Require("jQuery");
    //Script.Require("jQueryUI");
    Script.Require("jQueryMousewheel");

    Script.Require("pnotify");
    Script.Require("angular");
    Script.Require("angularResource");
    Script.Require("angularRoute");

    Script.Require("angular_UI_Router");
    Script.Require("angular_couchPotato");
    Script.Require("ui_utils");
    Script.Require("i18next");
    Script.Include("directives/angularjs-i18next-directive.js");
    Script.Include("directives/layout-directive.js");
    Script.Include("directives/filter-directive.js");
    Script.Include("directives/jqGrid-directive.js");
    Script.Include("controllers/agGridCtrl.js");
    Script.Include("services/loadingservice.js");
      
    Script.Require("ui_bootstrap");

    Style.Include("prettyGallery.css").AtHead();
    //Style.Include("prettyPhoto.css").AtHead();
    //Script.Include("./../../PrettyGallery/Scripts/jquery.prettyPhoto.js").AtHead();
}
@{
    
    
    Script.Require("jQuery").AtHead();
    Script.Require("angular").AtFoot();
    Script.Require("jQueryUI").AtHead();
    Style.Require("prettyPhoto").AtHead();
    Style.Require("prettyGallery").AtHead();
    Script.Require("jQuery").AtHead();
    Script.Require("prettyPhoto").AtHead();

    Script.Require("jQuery").AtFoot();
    Script.Require("jQueryUI").AtFoot();
    Style.Require("prettyPhoto").AtFoot();
    Style.Require("prettyGallery").AtFoot();
    Script.Require("jQuery").AtFoot();
    Script.Require("prettyPhoto").AtFoot();
}

<div id="loading">Loading...</div>
<section class="ng-cloak" data-ui-view>
</section>
@using (Script.Foot()) {
    @Display.ClientRoute(IsFrontEnd: true)
}

@using (Script.Foot()) {
<script type="text/javascript">
    //<![CDATA[

        $(document).ready(function () {
            $("a[rel^='prettyPhoto']").prettyPhoto({ "theme": "dark_rounded", "overlay_gallery": false });
        });

        $("#pop").on("click", function () {
            $('#imagepreview').attr('src', $('#imageresource').attr('src')); // here asign the image to the modal when the user click the enlarge link
            $('#imagemodal').modal('show'); // imagemodal is the id attribute assigned to the bootstrap modal, then i use the show function
        });

    //]]>
</script>
}